<template>
  <div class="menuDrawer-container">
    <el-drawer
     :visible="menuVisible"
     :title="title"
     @close="handleClose"
     width="50%"
    >
      <el-form
        ref="menuInfoForm"
        :model="Form"
        label-width="100px"
      >
        <el-form-item label="菜单名称" prop="menuType">
          <el-radio-group v-model="Form.menuType">
            <el-radio-button label="目录" />
            <el-radio-button label="菜单" />
            <el-radio-button label="按钮" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="Form.menuName" placeholder="请输入菜单名称"/>
        </el-form-item>
        <el-form-item label="父级菜单">
          <el-cascader
            v-model="Form.id"
            :options="cascadeOptions"
            :props="cascadeProps"
            @change="handleChange"
            style="width: 100%;"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="权限标识" prop="identification">
          <el-input v-model="Form.identification" placeholder="请输入权限标识"/>
        </el-form-item>
        <el-form-item label="路由地址" prop="menuRouter">
          <el-input v-model="Form.menuRouter" placeholder="请输入路由地址"/>
        </el-form-item>
      </el-form>
      <div class="drawer-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {menuData} from '@/mock/jsModule/system'

export default {
  name: 'deptDrawer',
  props:{
    title:{
      type: String,
      default: '菜单信息',
    },
    dialogVisible:{
      type: Boolean,
      default: false,
    },
    rowInfo:{
      type: Object,
      default: () =>{}
    }
  },
  data(){
    return{
      menuVisible: false,
      Form: {
        id: null,  // 级联选择器，应该绑定一个数组，回显时格式为数组
        menuName: null,
        menuType: null,
        menuRouter: null,
        identification: null,
      },
      cascadeProps:{
        value: 'id',
        label: 'menuName',
        // 在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。
        // checkStrictly 启用该功能后，可让父子节点取消关联，选择任意一级选项。
        checkStrictly:true
      },
    }
  },
  watch:{
    dialogVisible:{
      deep: true,
      handler(val){
        this.menuVisible = val
      }
    },
    rowInfo:{
      deep: true,
      handler(val){
        if(val.menuName){
          Object.keys(val).forEach(key =>{
            this.Form[key] = val[key]
          })
        }
      },
    }
  },
  computed:{
    cascadeOptions(){
      return menuData
    }
  },
  methods:{
    handleChange(){

    },
    resetForm(){
      Object.keys(this.Form).forEach(key =>{
        this.Form[key] = null
      })
    },
    handleClose() {
      this.$emit('update:dialogVisible',false)
      this.$refs['menuInfoForm'].resetFields()
      this.resetForm()
    },
    handleSubmit () {
      if(this.title.indexOf('新增') > -1){
        this.$emit('closeDialog', false)
        // 编写具体的新增代码
        this.$message.success('新增成功')
      }else{
        this.$emit('closeDialog', false)
        // 编写具体的编辑代码
        this.$message.success('编辑成功')
      }
      this.$refs['menuInfoForm'].resetFields()
      this.resetForm()
    }
  },
}
</script>

<style lang="scss" scoped>
.menuDrawer-container{
  text-align: left;
}
.drawer-footer{
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>
<style lang="scss">
.el-cascader-menu__wrap{
  margin-right: -5px !important;
}
</style>
